<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>分类</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.min.css">
    <link rel="stylesheet" href="./css/classify.min.css">
    <style>
        .mui-plus .plus {
            display: inline;
        }

        .plus {
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }

        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }

        p {
            text-indent: 22px;
        }

        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }

        .mui-popover {
            height: 300px;
        }

        .mui-content {
            padding: 10px;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="location">
            美食
            <span class="ico"></span>
        </div>
        <div class="my-search">
            <div class="mui-input-row mui-search">
                <input type="search" class="my-input-search mui-input-clear" placeholder="店铺/品类/商圈">
            </div>
        </div>
    </header>
    <secntion class="secntion-1">
        <!-- 筛选栏 -->
        <div class="filter">
            <!-- 选项卡 -->
            <a class="mui-control-item mui-active" href="#con-all">全部</a>
            <a class="mui-control-item" href="#classify-1">面食粥点</a>
            <a class="mui-control-item" href="#classify-2">简餐便当</a>
            <a class="mui-control-item" href="#classify-3">汉堡披萨</a>
            <!-- 弹出菜单 -->
            <a href="#bottomPopover" class="mui-btn mui-btn-link">↓</a>
        </div>

        <!-- 内容展示 -->
        <div class="content">
            <!-- 全部 -->
            <div id="con-all" class="mui-control-content mui-active">
                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XX小龙虾（沿江店）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">236份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">98%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥50</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">20分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XX火锅店（广州店）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">36份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">88%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥40</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">20分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XXX披萨旗舰店（华夏路）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">26份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">100%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥20</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">30分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XX小龙虾（沿江店）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">10份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">98%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥50</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">20分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

            </div>
            <!-- 分类1 -->
            <div id="classify-1" class="mui-control-content">
                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XX小龙虾（沿江店）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">236份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">98%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥50</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">20分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>
            </div>
            <!-- 分类2 -->
            <div id="classify-2" class="mui-control-content">
                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XX火锅店（广州店）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">36份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">88%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥40</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">20分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XXX披萨旗舰店（华夏路）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">26份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">100%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥20</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">30分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XXX披萨旗舰店（华夏路）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">26份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">100%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥20</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">30分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

            </div>
            <!-- 分类3 -->
            <div id="classify-3" class="mui-control-content">
                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XXX披萨旗舰店（华夏路）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">26份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">100%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥20</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">30分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

                <div class="item">
                    <div class="img"></div>
                    <div class="text">
                        <div class="con-title">XXX披萨旗舰店（华夏路）</div>
                        <div class="sale"><span class="ico"></span>月售<span class="data">26份</span></div>
                        <div class="praise"><span class="ico"></span>好评<span class="data">100%</span></div>
                        <div class="box">
                            <span class="qs-price">起送￥20</span>
                            <span class="ps-price">配送￥5</span>
                            <span class="ps-time">30分钟</span>
                            <span class="distance">1.5km</span>
                        </div>
                        <div class="activity-slogan">麻辣翠香买三斤送半斤，让你吃够</div>
                    </div>
                    <div class="details-ico"></div>
                </div>

            </div>
        </div>


        <!--弹出菜单-->
        <div id="bottomPopover" class="mui-popover mui-popover-bottom">
            <div class="mui-popover-arrow"></div>
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell"><a href="#">龙虾烧烤</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">特色小吃</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">地方菜系</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">川湘菜</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">炸鸡炸串</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">鸭脖卤味</a>
                        </li>
                        <li class="mui-table-view-cell"><a href="#">日料寿司</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </secntion>

    <script src="./js/flexible.js"></script>
</body>

</html>